<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .guess {
            margin-left: 5px;
        }
        .true {
            color: green;
        }
        .false {
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="button" value="重新开始一局游戏" onclick="reset()" class="reset"><br>
        请输入要猜的数字：<input type="text" value="" class="to_guess_num"><input type="button" value="猜" class="guess" onclick="guess()"><br>
        已经猜的次数：<span class="guess_count">0</span><br>
        结果：<span class="result"></span>
    </div>

    <script>
        let to_guess_num_element = document.querySelector('.to_guess_num');
        console.dir(to_guess_num_element);
        let guess_count_elment = document.querySelector('.guess_count');
        console.dir(guess_count_elment);
        let result_element = document.querySelector('.result');
        console.dir(result_element);
        let num = Math.floor(Math.random() * 100); //生成0-100之间的随机整数
        console.log(num);
        function reset() {
            to_guess_num_element.value = '';
            guess_count_elment.innerHTML = 0;
            result_element.innerHTML = ''
            num = Math.floor(Math.random() * 100); //重新生成随机数
        }
        function guess() {
            let guess_num = to_guess_num_element.value;
            if (guess_num > num) {
                result_element.innerHTML = '猜大了';
                result_element.className = false;
            }else if (guess_num < num) {
                result_element.innerHTML = '猜小了';
                result_element.className = false;
            }else {
                result_element.innerHTML = '猜对了';
                result_element.className = true;
            }
            guess_count_elment.innerHTML = parseInt(guess_count_elment.innerHTML) + 1;
        }
    </script>
</body>
</html>